<template>
  <div class="data-waring-wrapper">
    <xyDataHead>
      <template #icon>
        <svg-icon :icon-class="svgIcon" class="svg-icon"></svg-icon>
      </template>
      <template #title>
        <p>{{ title }}</p>
      </template>
      <template #number>
        <div class="warn-number" v-show="num">{{ num }}</div>
      </template>
      <template #view><span @click="handleView"
          >详情<i class="el-icon-d-arrow-right right-icon"></i></span
      ></template>
    </xyDataHead>
    <div class="data-warning-container">
      <div class="warning-scroll-container">
        <vue-seamless-scroll
          :data="warningMessages"
          :class-option="scrollOption"
          class="scroll-wrapper"
        >
          <div
            v-for="(item, index) in warningMessages"
            :key="index"
            :class="getWarningClass(item.type)"
          >
            <div class="head-contain">
              <div class="head-contain-name">{{ item.name }}</div>
              <div class="head-contain-time">{{ item.time }}</div>
            </div>
            <div>{{ item.content }}</div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import xyDataHead from "./xy-data-head.vue";

export default {
  components: {
    xyDataHead,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    svgIcon: {
      type: String,
      default: "",
    },
    num: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      warningMessages: [
        {
          name: "设备温度过高1",
          content: "设备ID: SY-D3-007 温度达到 85°C，超过安全阈值",
          time: "2021-08-01 10:00:00",
          type: "1",
        },
        {
          name: "电压不稳定",
          content: "设备ID: SY-D3-007 温度达到 85°C，超过安全阈值",
          time: "2021-08-01 10:00:00",
          type: "2",
        },
        {
          name: "通信异常",
          content: "设备ID: SY-D3-007 温度达到 85°C，超过安全阈值",
          time: "2021-08-01 10:00:00",
          type: "2",
        },
        {
          name: "设备温度过高",
          content: "设备ID: SY-D3-007 温度达到 85°C，超过安全阈值",
          time: "2021-08-01 10:00:00",
          type: "3",
        },
        {
          name: "设备温度过高6",
          content: "设备ID: SY-D3-007 温度达到 85°C，超过安全阈值",
          time: "2021-08-01 10:00:00",
          type: "1",
        },
      ],
      // 滚动配置
      scrollOption: {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量，根据dataList.length设置
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下，1向上，2向左，3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度（默认值0是无缝不停止的滚动），direction=>0/1
        singleWidth: 0, // 单步运动停止的宽度（默认值0是无缝不停止的滚动），direction=>2/3
        waitTime: 1000, // 单步运动停止的时间（默认值1000ms）
      },
    };
  },
  methods: {
    getWarningClass(type) {
      const classMap = {
        1: "warning-item-blue warning-item",
        2: "warning-item-red warning-item",
        3: "warning-item-yellow warning-item",
      };
      return classMap[type]; // 默认class
    },
    handleView(){
      this.$emit("handleView");
    }
  },
};
</script>

<style scoped lang="scss">
.data-waring-wrapper {
  height: 100%;
  .data-warning-container {
    height: calc(100% - 50px);
    overflow: hidden;
  }
}

.scroll-wrapper {
  height: 100%;
  overflow: hidden;
}

.warning-item {
  padding: 10px;
  color: #666;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: rgba(15, 23, 42, 0.7);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  color: #94a3b8;
  font-size: 11px;
}
.warning-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
}
.warning-item.warning-item-blue::before {
  background-color: #2d8cf0;
}
.warning-item.warning-item-red::before {
  background-color: #ef4444;
}
.warning-item.warning-item-yellow::before {
  background-color: #f59e0b;
}
// .warning-item:last-child {
//   margin-bottom: 50px;
// }
.head-contain {
  display: flex;
  justify-content: space-between;
  align-self: center;
  margin-bottom: 5px;

  .head-contain-name {
    color: #fff;
    font-size: 12px;
  }
}
.right-icon {
  animation: float 1s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
}
</style>
